<template>
<div>
    <div class="deptList" v-for="(item,index) in deptList" v-if="index>4" :key="index">
      <!-- <div class="dept">
        <div class="deptimgs"><img class="deptimg" src="/static/images/11.JPG"></div>
        <div class="names">{{ item.deptName }}</div>
        <div class="info">
          <div class="ct-title">
        <p class="names" style="min-height: 78px;">{{ item.deptName }}</p>
         </div>
        <div class="buttons">
        <van-button round type="info" color="#f1e7ab;" size="mini" @click="shows">了解更多</van-button>
          <van-button round type="info" color="#f18f8b" size="mini"
                      @click="updateClick(item)">加入我们吧！</van-button>
                      </div></div>
      </div> -->
 <div>
        <van-card
          desc="等待你的加入！！！"
          :title=" item.deptName "
          thumb="/static/images/11.JPG"
        >

          <view slot="footer">

            <!-- <el-tooltip effect="dark" content="申请入团" placement="top">
                          <van-button @click="updateClick(scope)" type="primary" icon="el-icon-edit" size="mini"></van-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="详情" placement="top">
                          <van-button @click="detailClick(scope.row)" type="warning" icon="el-icon-view" size="mini"></van-button>
                        </el-tooltip> -->
            <van-button round type="info" color="#f1e7ab;" size="mini" @click="shows">了解更多</van-button>
            <van-button round type="info" color="#f18f8b" size="mini" @click="updateClick(item)">加入我们吧！</van-button>

          </view>
        </van-card>
        <van-dialog id="van-dialog"/>
      
      <van-divider/>
    </div>

    
    </div>
 </div>
</template>

<script>
import {listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from '@/api/dept'
import {getToken} from '@/utils/auth'
import {mapGetters} from 'vuex'
import {$Message} from '@/../static/iview/base/index'
import {changeDept, listUserDept} from '@/api/user'
import store from '@/store'
import Dialog from '@/../static/vant/dialog/dialog'
import {addMessage} from '@/api/message'

const message = '想要了解更多详细信息，请到中原工学院大学生社团联合会web网站了解哦！'
export default {
  components: {},
  name: '',
  data: {
    open: false,
    show: false,
    handleclick: false,
    deptById: {},
    deptList: [], //社团数据
    queryParams: {
      deptName: undefined,
      status: '0'
    },
    form:{}
  },
  computed: {
    ...mapGetters(['avatar', 'name', 'user'])
  },
  mounted() {
    this.getDeptList();
  },
  getUserInfo(event) {
    console.log(event.detail);
  },
  onClose() {
    this.setData({close: false});
  },
  methods: {
    getDeptList() {
      listDept(this.queryParams).then(response => {
        this.deptList = response.data
        this.deptList.map(item => {
          //   // item.img = this.change(item.img)
          //   item.url=this.getObjectKeys(item.deptContent)
        })
      })
    },
    shows() {
   //   console.log(this.show);
      if (this.show) {

      } else {
        Dialog.alert({
          // title: '标题',
          message
        })
      }

    },
    handleClick() {
      wx.navigateTo({
        url: `/pages/signup/main`
      });
    },
    //       /** 查询社团列表 */
    // getDeptList() {
    //   listDept(this.queryParams).then(response => {
    //     this.deptList = this.handleTree(response.data, 'deptId')[0]
    //     console.log("ssss",this.deptList)
    //   })
    // },

    updateClick(val) {
      //console.log(val)
      if (!getToken()) {
        this.setToast({title: "请先登录！"})
        store.dispatch('LogOut').then(() => {
          wx.navigateTo({
            url: `/pages/subpage/login/main`
          });
        })
      } else {
        if (this.user.deptId) {
          if (this.user.deptStatus == '0') {
            this.setToast({title: "您的账号已经存在社团"})
          } else if (this.user.deptStatus == '1') {
            this.setToast({title: "您的账号已有待审核的社团"})
          }
          return
        }
        this.$router.push({
          path: './apply/main',
          query: {
            data: JSON.stringify(val)
          }
        })
      }
    },


  }
}
</script>
<style scoped>
.info {
  position: relative;
  /* top: -3 rpx; */
  min-height: 113px;
}

.ct-title {
  margin-bottom: 17.664px;
}

.title {
  font-size: 18px;
  line-height: 50 rpx;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.root-sec {
  line-height: 17.656px;
  height: 17.656px;
}

span {
  display: inline-block;
  vertical-align: top;
  font-size: 13.2px;
  font-weight: 400;
  color: #999;
  line-height: 17.656px;
  height: 17.656px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.container_new {
  margin: 0px 4%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
}

.container_new:last-child {
  padding-bottom: 20px;
}

.container_new a {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 12px 0px;
  outline: none;
}


.image {
  width: 32.174%;
  float: left;
  overflow: hidden;
  border-radius: 4px;
  margin-left: 4.348%;
  transform: scale(1);
  position: relative;
}

.viewer {
  overflow: hidden;
  background-color: #eaeaea;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
}
</style>
